<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-21 19:03:46
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-02-24 14:25:06
 * @FilePath: /XMate-h5/src/components/choosePeople/components/BottomBar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="fixed-bottom">
    <!-- 已选择的标签展示 -->
    <div
      v-if="tags.length"
      class="selected-tags px-4 py-2 flex flex-nowrap overflow-x-auto bg-white border-t"
    >
      <TransitionGroup name="tag-list" tag="div" class="flex flex-nowrap">
        <div
          v-for="tag in tags"
          :key="tag.id"
          class="tag-item flex-shrink-0 text-[#436DFF] bg-[#ECF0FF] rounded-full px-3 py-1 text-sm flex items-center mr-2"
        >
          {{ tag.name }}
          <van-icon
            name="cross"
            class="ml-1 p-1"
            @click.stop="$emit('remove-tag', tag)"
          />
        </div>
      </TransitionGroup>
    </div>

    <!-- 底部按钮 -->
    <div
      class="bg-white border-t px-4 py-2 h-[60px] flex justify-end items-center"
    >
      <van-button
        class="w-[76px] h-[36px]"
        type="primary"
        color="#436BFF"
        @click="$emit('confirm')"
        >确定{{ tags.length > 0 ? `(${tags.length})` : "" }}</van-button
      >
    </div>
  </div>
</template>

<script setup>
defineProps({
  tags: {
    type: Array,
    required: true
  }
});

defineEmits(["remove-tag", "confirm"]);
</script>

<style lang="less" scoped>
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  z-index: 10;

  .selected-tags {
    max-height: 56px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;

    &::-webkit-scrollbar {
      display: none;
    }

    .van-icon {
      cursor: pointer;
      transition: background-color 0.2s ease;
      
      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
      }
    }
  }
}

// 标签动画
.tag-list-move,
.tag-list-enter-active,
.tag-list-leave-active {
  transition: all 0.3s ease;
}

.tag-list-enter-from,
.tag-list-leave-to {
  opacity: 0;
  transform: translateX(-10px);
}

.tag-list-leave-active {
  position: absolute;
}

.tag-item {
  transition: all 0.3s ease;
}
</style>
